<template>
  <div class="slider">
    <div class="mask">
      <div class="container">
        <div class="title">
          <div class="text">
            <span>请完成下列验证后继续</span>
          </div>
          <div class="button-group">
            <el-icon @click="reset"><Refresh /></el-icon>
          </div>
        </div>
        <div class="img">
          <div class="backgroup-img">
            <img class="inner-bg-img" :src="backgroupImg" />
          </div>
          <div @mousedown="start" class="move-img" :style="{left: `${moveX}px`}">
            <img class="inner-mv-img" @dragstart.prevent :src="moveImg" />
          </div>
        </div>
        <div class="slide">
          <div class="slider-mask" :style="{width: `${blcokLeft}px`}">
            <div class="block" ref="block" @mousedown="start" :style="{left: `${blcokLeft}px`}">
              <span class="yidun_slider_icon"></span>
            </div>
          </div>
        </div>
        <div class="loading" v-if="loading">
          <span>loading...</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Refresh } from '@element-plus/icons-vue'
/* eslint-disable */

// =========================================
// 父组件需要提供的方法 名称
// =========================================

/**
 * 获取滑块图片方法
 */
const GET_IMG_FUN = "getImg";
/**
 * 校验滑块图片方法
 */
const VALID_IMG_FUN = "validImg";
/**
 * 滑块窗口关闭事件监听
 */
const CLOST_EVENT_FUN = "close";

export default {
  data() {
    return {
      /**滑块背景图片 */
      backgroupImg: "",
      /**滑块图片 */
      moveImg: "",
      /**是否已经移动滑块 */
      startMove: false,
      /**滑块移动距离 */
      blcokLeft: 0,
      /**开始滑动的x轴 */
      startX: 0,
      /**划过的百分比 */
      movePercent: 0,
      /**验证码唯一ID */
      uuid: "",
      /**滑块移动的x轴 */
      moveX: 0,
      /** 加载遮罩标识 */
      loading: false
    };
  },
  components: {
    Refresh
  },
  props: {
    // 是否开启日志， 默认true
    log: {
      type: Boolean,
      required: false,
      default: true
    },
    //滑块的y坐标
    moveImgy: {
      type: Number,
      default: 0
    }
  },
  mounted() {
    this.getImg();
  },
  methods: {
    /**
     * 获取滑块图片
     */
    getImg() {
      this.loading = true;
      this.$emit(GET_IMG_FUN, data => {

        this.loading = false;
        if (!data) return;

        this.backgroupImg = data.captcha.backgroundImage;
        this.moveImg = data.captcha.sliderImage;
        this.uuid = data.id;
      });
    },
    /**
     * 校验图片
     */
    validImg() {
      this.$emit(VALID_IMG_FUN, this.movePercent, this.uuid, data => {
        if (data === false) {
          this.reset();
        } else {
          this.reset();

        }
      });
    },
    /**
     * 重新生成图片
     */
    reset() {
      this.getImg();
      this.moveX = 0;
      this.movePercent = 0;
      this.startX = 0;
      this.blcokLeft = 0;
    },
    /**
     * 按钮关闭事件
     */
    close() {
      this.$emit(CLOST_EVENT_FUN);
    },
    /**
     * 开始滑动
     */
    start(e) {
      this.startX = e.pageX;
      this.startMove = true;
      window.addEventListener("mousemove", this.move);
      window.addEventListener("mouseup", this.up);
    },
    /**
     * 滑块滑动事件
     */
    move(e) {
      if (!this.startMove) return;
      const moveX = e.pageX - this.startX;
      const movePercent = moveX / 280;
      if (moveX <= 0) {
        this.blcokLeft = 0;
        this.moveX = 0;
        this.movePercent = 0;
      } else if (moveX >= 0 && moveX <= 235) {
        this.blcokLeft = moveX;
        this.moveX = moveX;
        this.movePercent = movePercent;
      } else if (moveX >= 235) {
        this.blcokLeft = 235;
        this.moveX = 235;
        this.movePercent = movePercent;
      }
    },
    /**
     * 滑块鼠标抬起事件
     */
    up(e) {
      window.removeEventListener("mousemove", this.move);
      window.removeEventListener("mouseup", this.up);
      if (!this.startMove) return;
      this.startMove = false;
      this.validImg();
    }
  },
  /**
   * 销毁事件
   */
  beforeDestroy() {
    window.removeEventListener("mousemove", this.move);
    window.removeEventListener("mouseup", this.up);
  }
};
</script>

<style lang="scss" scoped>
.slider-mask {
  position: absolute;
  left: 0;
  top: 0;
  height: 40px;
  border: 0 solid #1991fa;
  background: #d1e9fe;
  border-radius: 2px;
}
.yidun_slider_icon {
  position: absolute;
  top: 50%;
  margin-top: -6px;
  left: 50%;
  margin-left: -6px;
  width: 14px;
  height: 10px;
  background-image: url(https://cstaticdun.126.net//2.13.7/images/icon_light.4353d81.png);
  background-position: 0 -13px;
  background-size: 32px 544px;
}
.inner-mv-img,
.inner-bg-img,
.title {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}
.slider {
  .mask {
    display: block;
    z-index: 998;
    background: rgba(0, 0, 0, 0);
    width: 310px;
    width: 100%;
    height: 280px;
    margin: 0 auto;
  }
  .container {
    position: absolute;
    left: 19px;
    z-index: 999;
    width: 310px;
    height: 280px;
    margin: auto;
    background: rgba(255, 255, 255, 1);
    // border-radius: 6px;
    // box-shadow: 0px 0px 11px 0px rgba(153, 153, 153, 1);
    box-sizing: border-box;
    padding: 17px 15px;
    // transform: scale(1.1);
    .title {
      font-size: 14px;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4px;
      .button-group {
        i {
          font-size: 16px;
          color: $mainColor;
          cursor: pointer;
        }
      }
    }
    .img {
      position: relative;
      margin-bottom: 10px;
      width: 280px;
      height: 180px;
      overflow: hidden;
      img {
        // width: 100%;
      }
      .backgroup-img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
      }
      .move-img {
        width: 50px;
        position: absolute;
        left: 0;
        top: 0;
        img{
          width: 100%;
        }
      }
    }
    .slide {
      width: 100%;
      height: 40px;
      border: 1px solid #e4e7eb;
      background-color: #f7f9fa;
      box-sizing: border-box;
      position: relative;
      &::before {
        position: absolute;
        content: "按住左边按钮移动完成上方拼图";
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        color: #999;
        width: 100%;
        height: 100%;
        text-indent: 50px;
      }
      .block {
        width: 40px;
        height: 38px;
        background-color: #fff;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 0;
        top: 0;
        cursor: pointer;
        background-size: 30px;
        background-repeat: no-repeat;
        background-position: center;
      }
    }
    .block:hover {
      background-color: #1991fa;
    }
    .block:hover .yidun_slider_icon {
      background-image: url(https://cstaticdun.126.net//2.13.7/images/icon_light.4353d81.png);
      background-position: 0 0;
      background-size: 32px 544px;
    }
    .loading {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.3);
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
    }
  }
}
</style>
